<template>
  <div class="wrapper">
    <!-- 顶部导航栏 -->
    <div v-if="pageIndex === -1" class="card">
      <div v-if="pageIndex === -1">
        <div class="flex-row">
          <el-button type="primary" @click="reloadPage">刷新页面</el-button>
          <div style="flex:1;" />
          <el-button type="primary" @click="true">新增班级</el-button>
        </div>
      </div>
      <div v-if="pageIndex === 1">
        <el-page-header content="查看考试详情" @back="goBack" />
        <el-divider />
      </div>
    </div>
    <!-- 首页 -->
    <el-card class="box-card" style="margin-bottom:10px;">
      <div slot="header" class="clearfix">
        <span>选择班级</span>
      </div>
      <el-radio-group v-model="radio">
        <div style="margin-bottom:10px;">
          <el-radio :label="0">17计算机1班</el-radio>
        </div>
        <div style="margin-bottom:10px;">
          <el-radio :label="1">诗词鉴赏兴趣班</el-radio>
        </div>
      </el-radio-group>
    </el-card>

    <el-card class="box-card" style="margin-bottom:10px;">
      <div slot="header" class="clearfix">
        <span>选择考试</span>
      </div>
      <el-radio-group v-model="radio1">
        <div style="margin-bottom:10px;">
          <el-radio :label="0">垃圾分类模拟题</el-radio>
        </div>
        <div style="margin-bottom:10px;">
          <el-radio :label="1">高等数学测试题</el-radio>
        </div>
      </el-radio-group>
    </el-card>

    <div v-if="pageIndex === -1" class="card">
      <el-table :data="homePage. myClassTableData" border style="width: 100%;">
        <el-table-column v-for="item in homePage.tableHead" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" />
        <el-table-column label="操作" width="192">
          <template slot-scope="{ row }">
            <el-button-group>
              <el-button type="primary" icon="el-icon-view" @click="true===row" />
              <el-button type="primary" icon="el-icon-edit" @click="onClickbuttom" />
              <el-button type="primary" icon="el-icon-delete" @click="true" />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 跳转页 -->
    <div v-if="pageIndex === 1" class="narrow-card">a

    </div>
    <div class="card" style="    border-radius: 4px;">
      <div id="myChart" :style="{width: '700px', height: '500px'}" />
    </div>
  </div>
</template>

<script>
var echarts = require('echarts')

export default {
  name: 'TchTest',
  data() {
    return {
      radio: 0, radio1: 0,
      isLoading: false, // 页面正在加载
      pageIndex: 0, // 页面索引
      homePage: {
        tabsActiveName: '0',
        tableHead: [
          { prop: 'c_name', label: '班级名称', width: '' },
          { prop: 'admin', label: '班主任', width: '' },
          { prop: 'c_count', label: '班级人数', width: '' },
          { prop: 'create_time', label: '班级人数', width: '' }
        ],
        myClassTableData: [
          { c_name: '诗词鉴赏兴趣班', admin: 'admin3', c_count: '7', create_time: '2021年05月16日 00:50:42' },
          { c_name: '计算机17级1班', admin: 'admin3', c_count: '7', create_time: '2021年05月16日 00:37:29' }

        ]

      }, // 首页数据
      classAddStuData: {
        calssName: '17计算机1班',
        // label: `备选项 ${ i }`
        studentListData: [
          { key: '1', label: `张小明(ID:3)` },
          { key: '2', label: `herry(ID:12)` },
          { key: '3', label: `黄兴(ID:16)` },
          { key: '4', label: `王洋(ID:21)` },
          { key: '5', label: `Yamada Aoi(ID:14)` },
          { key: '我的', label: `富田武(ID:15)` },
          { key: '7', label: `张小明(ID:3)` },
          { key: '8', label: `黄大(ID:23)` },
          { key: '9', label: `黄二(ID:22)` },
          { key: '10', label: `黄三(ID:3)` },
          { key: '11', label: `张无极(ID:31)` },
          { key: '12', label: `张萨(ID:38)` },
          { key: '13', label: `张小明(ID:3)` },
          { key: '7341', label: `张小明(ID:3)` },
          { key: '743214', label: `张小明(ID:3)` },
          { key: '72341', label: `张小明(ID:3)` },
          { key: '12347', label: `张小明(ID:3)` }
        ],
        studentListvalue: ['7', '我的']

      } // 添加学生到班级页面数据

    }
  },
  mounted() {
    this.initCharts()
  },

  methods: {
    onClickbuttom() {
      this.pageIndex = 1
      this.initCharts()
    },
    reloadPage() {
      this.$router.go(0)
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart'))
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: '学生得分占总分百分比图'
        },
        tooltip: {},
        xAxis: {
          data: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: [1, 0, 0, 0, 3, 2, 1, 5, 0, 1]
        }]
      })
    },
    /**
     * 返回到起始页
     */
    goBack() {
      this.pageIndex = 0
    },
    /**
    * 给table每格rows加上属性
    */
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex
    },
    /**
     * 点击了某一行
     */
    onRowClick(row) {
      console.log(row.row_index)
    }
  }
}
</script>

<style scoped>
.wrapper {
  background-color: #e6e6e6;
  padding: 10px;
  min-height: calc(100vh - 84px);
}
.card {
  background-color: #fff;
  padding: 24px;
  margin-bottom: 10px;
}
.narrow-card {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 24px;
}
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
</style>
